<template>
  <view class="random-drop-box">
    <view
      v-for="(item, index) in items"
      :key="index"
      :style="{ top: item.top + 'px', left: item.left + 'px' }"
      class="random-drop"
    >
      <view
        class="drop-image"
        :style="{ transform: `scale(${item.scale})` }">
        <u--image
          :src="list[item.index]"
          mode="widthFix"
          width="100%"></u--image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RandomDrop',
  props: {
    list: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      items: [],
      maxLeft: 300,
      maxTop: 1000,
      dropInterval: 300, // 掉落间隔，单位毫秒
      interVal: null,
    };
  },
  mounted() {
    this.startRandomDrop();
  },
  destroyed() {
    clearInterval(this.interVal);
  },
  methods: {
    async startRandomDrop() {
      const dom = await this.$uGetRect(`.random-drop-box`);
      this.maxLeft = dom.width * 1.3;
      this.maxTop = dom.height * 1.6;
      this.items = [this.getItem()];
      this.interVal = setInterval(() => {
        this.$nextTick(() => {
          this.items.push(this.getItem());
        });
      }, this.dropInterval);
    },
    getItem() {
      const max = this.list.length - 1;
      const min = 0;
      return {
        top: 700,
        left: Math.random() * this.maxLeft * 0.8,
        index: Math.floor(Math.random() * (max - min + 1)) + min,
        scale: (Math.floor(Math.random() * (9 - 5 + 1)) + 5) / 10,
      };
    },
  },
};
</script>

<style lang="scss">
.random-drop-box{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 100;
}
.random-drop {
	position: absolute;
	animation: drop 4s linear;
	.drop-image{
		// transform: scale(0.7);
		width: 70px;
		height: 108px;
	}
}

@keyframes drop {
	from {
		// opacity: 0;
		transform: translateY(-920px);
	}
	to {
		// opacity: 1;
		transform: translateY(0);
	}
}
</style>